<template>
    <div class="area-map-container">
        <div id="area-map-content" class="area-map-content"></div>
        <div class="back-btn" @click="handleBack">
            <div class="back-btn-label" style="opacity:1;">返回市级</div>
            <div class="back-btn-icon">
                <img src="../assets/back.png" alt="" class="image">
            </div>
        </div>
        <div class="map-circle-wrapper">
            <div class="map-circle">
                <img src="../assets/circle.png" alt="" class="map-circle-image">
                <div class="map-circle-title-wrapper">
                    <div class="map-circle-label-wrapper">
                        <div class="map-circle-label-image">
                            <img src="../assets/map-title.png" alt="" class="image">
                        </div>
                        <div class="map-circle-label">{{mapName}}</div>
                    </div>
                    
                </div>
            </div>
        </div>

        
    </div>
</template>

<script>
let echarts = require('echarts');
let img = require('../assets/area-tips.png');
import beilun from '@/utils/json/beilun.json';
import cixi from '@/utils/json/cixi.json';
import fenghua from '@/utils/json/fenghua.json';
import haishu from '@/utils/json/haishu.json';
import jiangbei from '@/utils/json/jiangbei.json';
import ninghai from '@/utils/json/ninghai.json';
import xiangshan from '@/utils/json/xiangshan.json';
import yinzhou from '@/utils/json/yinzhou.json';
import yuyao from '@/utils/json/yuyao.json';
import zhenhai from '@/utils/json/zhenhai.json';
import daxie from '@/utils/json/daxie.json';
import dongqianhu from '@/utils/json/dongqianhu.json';
import gaoxinqu from '@/utils/json/gaoxinqu.json';
import { cycledrow } from '@/utils/chart.js';
import { getSearchArea } from '@/api/index.js';

export default {
    name: '',
    components:{
      
    },
    props:{
        year: {
            type: String
        },
        activeArea: {
            type: String
        }
    },

    data() {
        return {
            mapName:'',
            mapData:[],
            tipsLabel:'',
            mapOption:{},
            myChart:null
        }
    },
    watch:{
        mapOption: {
            handler: function(newVal, oldVal) {
                if (this.myChart) {
                    if (newVal) {
                        this.$nextTick(function(){
                            this.myChart.setOption(newVal);
                        })
                    } else {
                        this.$nextTick(function(){
                            this.myChart.setOption(oldVal);
                        })
                    }
                } else {
                    var mapData=this.mapData;
                    this.$nextTick(function(){
                        this.mapInit(mapData);
                    })
                }
            },
            deep: true,
            //immediate: true
        }
    },
    created(){
        this.mapName=this.$route.params.name;
    },
    mounted(){
        var _this=this;
        this.$nextTick(function(){
            this.getTableData(function(data){
                _this.mapInit(data);
            });
            cycledrow('area-map-content',function(){
                _this.getTableData(function(data){
                    _this.mapInit(data);
                });
            });
        });
       
    },
    methods: {
        handleBack(){
            this.$router.push('/');
        },
        getTableData(callback){
            var _this=this;
            console.log(this.year);
            getSearchArea({
                id:this.$route.params.id,
                year:''
            }).then(res => {
                if(res.code==200){
                    var data=res.data;
                    var newArr=[];
                    for(var i=0;i<data.length;i++){
                        var item=data[i];
                        if(item.x && item.y){
                            var xdata=Number(item.x);
                            var ydata=Number(item.y);
                            var newItem={ 
                                name: item.value, 
                                coord: [xdata,ydata], 
                                value: '' 
                            };
                            newArr.push(newItem);
                        }
                        if(i==data.length-1){
                            this.mapData=newArr;
                            callback(newArr);
                        }
                    }
                }
                return;
            }).catch(err => {
                console.log(err);
            });
        },
        mapInit(mapData){
            var mapName=this.mapName;
            var fileName;
            switch(mapName){
                case "北仑区":
                    fileName=beilun;
                    break;
                case "慈溪市":
                    fileName=cixi;
                    break;
                case "奉化区":
                    fileName=fenghua;
                    break;
                case "海曙区":
                    fileName=haishu;
                    break;
                case "江北区":
                    fileName=jiangbei;
                    break;
                case "宁海县":
                    fileName=ninghai;
                    break;
                case "象山县":
                    fileName=xiangshan;
                    break;
                case "余姚市":
                    fileName=yuyao;
                    break;
                case "鄞州区":
                    fileName=yinzhou;
                    break;
                case "镇海区":
                    fileName=zhenhai;
                case "大榭":
                    fileName=daxie;
                case "东钱湖":
                    fileName=dongqianhu;
                case "高新区":
                    fileName=gaoxinqu;
                    break;
            }
            var _this=this;
            var myChart = echarts.init(document.getElementById('area-map-content'));
            this.myChart=myChart;
            echarts.registerMap('cityMap',fileName,{});  //加载自定义边界数据地图
            var option = {
                //backgroundColor:'#04222e',// 背景颜色
                tooltip: {
                    padding: 0,
                    backgroundColor: 'transparent',
                    borderWidth:'0',
                    formatter: params => {
                        var str=``;
                        var hoverLabel=params.name;
                        if(hoverLabel.length>7){
                            var label1=hoverLabel.slice(0,7);
                            var label2=hoverLabel.slice(7,hoverLabel.length);
                            hoverLabel=`${label1}<br>${label2}`;
                        }
                        if(params.componentType==='markPoint'){
                            str = `
                                <div style="position:relative;z-index:120;width:168px;height:122px;">
                                    <div style="width:100%;height:100%;display:flex;justify-content:center;align-items:center;position:relative;">
                                        <div style="position:absolute;top:0px;left:0px;width:100%;height:100%;">
                                            <img class="" src="${img}" style="width:100%;height:100%;"/>
                                        </div>
                                        <div style="width:125px;height:100%;position:relative;z-index:120;color:#fff;font-size: 18px;
                                        margin:0 auto;display:flex;align-items:center;white-space:wrap;">
                                            ${hoverLabel}
                                        </div>
                                    </div>
                                </div>
                            `;
                        }
                        return str;
                    }
                },
                series: [
                    {
                        name: '地图',
                        type: 'map',
                        mapType: 'cityMap',
                        aspectScale: 1,  //地图长度比
                        itemStyle: {
                                normal: {
                                    show: true,
                                    areaColor:'rgba(255, 255, 255, 0.11)', //地图区域的颜色 也可以颜色渐变如下的 areaColor
                                    // areaColor:{
                                    //     type: 'radial',
                                    //     x: 0.5,
                                    //     y: 0.5,
                                    //     r: 0.8,
                                    //     colorStops: [{
                                    //         offset: 0,
                                    //         color: 'rgba(147, 235, 248, 0)' // 0% 处的颜色
                                    //     }, {
                                    //         offset: 1,
                                    //         color: 'rgba(147, 235, 248, .5)' // 100% 处的颜色
                                    //     }],
                                    //     globalCoord: false // 缺省为 false
                                    // },
                                    borderColor: 'rgb(32,108,212)', //边界线颜色
                                    borderWidth: '3', //边界线的宽度
                                },
                                emphasis: { // 鼠标移入时区域的样式
                                    areaColor: 'rgba(255, 255, 255, 0.11)',
                                    borderColor: 'rgb(32,108,212)',
                                    borderWidth: 3,
                                    color: 'green'
                                }
                            },
                            label: {
                                normal: {
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.11)',
                                        fontSize: 50
                                    }
                                },
                                emphasis: {//对应的鼠标悬浮效果
                                    show: true,
                                    textStyle: {
                                        color: 'rgba(255, 255, 255, 0.11)'  //鼠标移入对应的省市区字体颜色
                                    }
                                }
                            },
                            markPoint: {
                                symbol: 'image://' + require('../assets/marker.png'),// 自定义图片路径
                                symbolSize: [35, 32], // 图片大小
                                label: {
                                    position: 'top',
                                    color: '#fff'
                                },
                                // coord数组存放地址坐标
                                data: mapData
                                /*[
                                    { name: '宁波市区政府', coord: [121.547,29.8172], value: '' }
                                ]*/
                            }
                           
                    }
                ]
            }
            this.mapOption=option;
            //myChart.setOption(option,true);
            /*myChart.on('click',function(params){
                
            });*/
            //myChart.resize();
            this.$emit('hasaread',true);
            window.onresize = function() {
                myChart.resize();
            };
        }
    }
}
</script>

<style scoped>
.area-map-container{
    width:100%;
    height:100%;
    display:flex;
    justify-content: center;
    position:relative;
}
.area-map-content{
    width:100%;
    height:100%;
}
.back-btn{
    position:absolute;
    top:30px;
    left:27px;
    width: 144px;
    height: 40px;
    background: #1049A4;
    box-shadow: 0px 1px 5px 2px #2E68AC;
    border-radius: 4px;
    border: 2px solid #037BFE;
    display:flex;
    justify-content: center;
    align-items: center;
    color:#fff;
    cursor:pointer;
    opacity:0.5;
}
.back-btn-label{
    font-size: 18px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #FFFFFF;
    opacity:1;
    position:relative;
    z-index:10;
}
.back-btn-icon{
    width: 19px;
    height: 19px;
    opacity:1;
    margin-left:5px;
}
.image{
    width:100%;
    height:100%;
    opacity:1;
}
.map-circle-wrapper{
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    text-align:center;
}
.map-circle{
    position:relative;
    width:100%;
    height:100%;
}
.map-circle-image{
    height:238px;
    width:608px;
}
.map-circle-title-wrapper{
    width:100%;
    text-align:center;
    position:absolute;
    bottom:60px;
}
.map-circle-label-wrapper{
    width:200px;
    margin:0 auto;
    position:relative;
}
.map-circle-label-image{
    width:100%;
    height:100%;
    position:absolute;
    top:0px;
    left:0px;
}
.map-circle-label{
    font-size: 24px;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #FFFFFF;
    letter-spacing: 3px;
}

</style>


